<template>
  <div class="container">
    <a-card :bordered="false">
      <my-button type='add' @click="open"></my-button>
      <Rtable :list='list' @change='toEdit' @remove='toRemove' @add='toAdd'></Rtable>
    </a-card>
    <!-- 弹窗 -->
    <a-modal :maskClosable="false" :destroyOnClose='true' title="操作" v-model="modal" @ok="submit" :width='600'>
      <a-form :form="form">
        <a-form-item label="父级" v-bind="formItemLayout">
          <a-select v-decorator="['id',{rules: [{ required: true, message: '请选择' }]}]" placeholder="请选择父级">
            <a-select-option v-for="item in parentList" :key="item.id">
              {{item.name}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="能力节点" v-bind="formItemLayout">
          <a-input placeholder="请输入能力节点" v-decorator="['name',{rules: [{ required: true, message: '请输入能力节点' }]}]"></a-input>
        </a-form-item>
        <a-form-item label="能力名称" v-bind="formItemLayout">
          <a-input placeholder="请输入能力名称" v-decorator="['title',{rules: [{ required: true, message: '请输入能力名称' }]}]"></a-input>
        </a-form-item>
        <a-form-item label="能力描述" v-bind="formItemLayout">
          <a-input type=textarea placeholder="请输入能力描述" v-decorator="['desc',{rules: [{ required: true, message: '请输入能力描述' }]}]"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import Rtable from './table'
import * as Api from '@/api/authManage'

export default {
  components: {
    Rtable
  },
  data() {
    return {
      modal: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        }
      },
      form: this.$form.createForm(this),
      list: [],
      parentList: [],
      record: {},
    };
  },
  mounted() {
    this.fetchList()
  },
  methods: {
    async fetchList() {
      const { list } = await Api.permissionList()
      this.list = list
      this.parentList = [{ parent_id: 0, name: '顶级', id: 0 }, ...list]
      console.log(this.parentList, 'pa')
    },
    open() {
      this.modal = true
      this.record = {}
    },
    toAdd({ id }) {
      this.modal = true
      this.$nextTick(() => {
        this.form.setFieldsValue({
          id
        })
      })
    },
    toEdit(row) {
      this.modal = true
      this.record = row
      console.log(row)
      let { id, name, title, parent_id, desc } = row
      parent_id ? id = parent_id : ''
      this.$nextTick(() => {
        this.form.setFieldsValue({
          id, name, title, desc
        })
      })
    },
    toRemove({ id, title }) {
      this.$confirm({
        title: '删除',
        content: `您确定要删除${title}吗？`,
        onOk: async () => {
          await Api.permissionRemove(id)
          this.fetchList()
        }
      })
    },
    // submit
    submit() {
      this.form.validateFields(async (err, data) => {
        if (!err) {
          console.log(data)
          let d = { ...data }
          const { id = '' } = this.record
          d.parent_id = d.id
          if (id) {
            d.id = id
            await Api.permissionUpdate(d)
          } else {
            await Api.permissionAdd(d)
          }
          this.modal = false
          this.fetchList()
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
